"use client"

import React from 'react'
import { MainLayout } from '@/components/layout/main-layout'
import { Button } from '@/components/ui/button'
import { 
  Users, 
  Activity, 
  TrendingUp, 
  AlertCircle,
  Plus
} from 'lucide-react'

// 统计卡片组件
function StatsCard({ 
  title, 
  value, 
  change, 
  icon: Icon, 
  color = "blue" 
}: {
  title: string
  value: string
  change: string
  icon: any
  color?: string
}) {
  return (
    <div className="bg-white rounded-lg border border-gray-200 p-6">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-gray-600">{title}</p>
          <p className="text-2xl font-bold text-gray-900 mt-2">{value}</p>
          <p className={`text-sm mt-2 ${
            change.startsWith('+') ? 'text-green-600' : 'text-red-600'
          }`}>
            {change} 较上月
          </p>
        </div>
        <div className={`p-3 rounded-full bg-${color}-100`}>
          <Icon className={`h-6 w-6 text-${color}-600`} />
        </div>
      </div>
    </div>
  )
}

export default function DashboardPage() {
  return (
    <MainLayout title="仪表盘">
      <div className="space-y-6">
        {/* 统计概览 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <StatsCard
            title="总用户数"
            value="1,234"
            change="+12%"
            icon={Users}
            color="blue"
          />
          <StatsCard
            title="健康记录"
            value="5,678"
            change="+8%"
            icon={Activity}
            color="green"
          />
          <StatsCard
            title="活跃用户"
            value="892"
            change="+15%"
            icon={TrendingUp}
            color="purple"
          />
          <StatsCard
            title="异常警报"
            value="23"
            change="-5%"
            icon={AlertCircle}
            color="red"
          />
        </div>

        {/* 快速操作 */}
        <div className="bg-white rounded-lg border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-gray-900">快速操作</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Button className="h-20 flex-col space-y-2">
              <Plus className="h-6 w-6" />
              <span>添加用户</span>
            </Button>
            <Button variant="outline" className="h-20 flex-col space-y-2">
              <Activity className="h-6 w-6" />
              <span>录入健康数据</span>
            </Button>
            <Button variant="outline" className="h-20 flex-col space-y-2">
              <TrendingUp className="h-6 w-6" />
              <span>生成报告</span>
            </Button>
          </div>
        </div>

        {/* 最近活动 */}
        <div className="bg-white rounded-lg border border-gray-200 p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">最近活动</h2>
          <div className="space-y-4">
            {[
              { user: "张三", action: "更新了血压数据", time: "2分钟前" },
              { user: "李四", action: "完成了体检记录", time: "15分钟前" },
              { user: "王五", action: "上传了心率监测", time: "1小时前" },
              { user: "赵六", action: "修改了个人信息", time: "2小时前" },
            ].map((activity, index) => (
              <div key={index} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                <div className="flex items-center space-x-3">
                  <div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
                    <span className="text-sm font-medium text-blue-600">
                      {activity.user.charAt(0)}
                    </span>
                  </div>
                  <div>
                    <p className="text-sm font-medium text-gray-900">
                      {activity.user} {activity.action}
                    </p>
                  </div>
                </div>
                <span className="text-xs text-gray-500">{activity.time}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </MainLayout>
  )
}